<template>
    <div>
        <n-h5>违反法律法规</n-h5>
        <n-radio-group v-model:value="value" name="radiogroup">
            <n-space>
                <n-radio
                    v-for="item in options1"
                    :key="item.value"
                    :value="item.value"
                >{{ item.label }}</n-radio>
            </n-space>
        </n-radio-group>
        <n-h5>侵犯个人权益</n-h5>
        <n-radio-group v-model:value="value" name="radiogroup">
            <n-space>
                <n-radio
                    v-for="item in options2"
                    :key="item.value"
                    :value="item.value"
                >{{ item.label }}</n-radio>
            </n-space>
        </n-radio-group>
        <n-h5>有害社区环境</n-h5>
        <n-radio-group v-model:value="value" name="radiogroup">
            <n-space>
                <n-radio
                    v-for="item in options3"
                    :key="item.value"
                    :value="item.value"
                >{{ item.label }}</n-radio>
            </n-space>
        </n-radio-group>
        <n-h5>其他</n-h5>
        <n-radio-group v-model:value="value" name="radiogroup">
            <n-space>
                <n-radio
                    v-for="item in options4"
                    :key="item.value"
                    :value="item.value"
                >{{ item.label }}</n-radio>
            </n-space>
        </n-radio-group>
    </div>
</template>

<script setup lang='ts'>
import { onUnmounted, ref, watch } from 'vue';

const value = ref(null)

const emit = defineEmits(['ChangeValue'])

// 监听选项的变化传给父组件
watch(value, (value, prevValue) => {
    emit('ChangeValue', value)
})

// 销毁前将值复位
onUnmounted(() => {
    emit('ChangeValue', -1)
})

const options1 = [
    {
        label: "违法违规",
        value: 0,
    },
    {
        label: "色情",
        value: 1,
    },
    {
        label: "低俗",
        value: 2,
    },
    {
        label: "赌博诈骗",
        value: 3,
    }
]

const options2 = [
    {
        label: "人身攻击",
        value: 4,
    },
    {
        label: "侵犯隐私",
        value: 5,
    },
]

const options3 = [
    {
        label: "垃圾广告",
        value: 6,
    },
    {
        label: "引战",
        value: 7,
    },
    {
        label: "刷屏",
        value: 8,
    },
    {
        label: "内容不相关",
        value: 9,
    }
]

const options4 = [
    {
        label: "其他",
        value: 10,
    }
]
</script>

<style scoped>
</style>